$(function(){
    var inpTags = $('#inpTags'),inp_width=inpTags.width();
    var form_tags = $('#form-tags');
    var form_ats = $('#form-ats');
    function removeSpan(){
        var igroup = $(this).parent();
        inpTagsObjLeftWidth( $('#inpTags'), -igroup.outerWidth(true) );
        igroup.remove();
        zyfi();
        removeTag($(this).prev().text());
        var c_width=0;
        $(".hot-tag-box>span").each(function(){
            c_width+=$(this).width()+10;
        });
        inpTags.width(inp_width-c_width);
    }
    $(".hot-tag-box .hot-tag-del").click(removeSpan);
    function createTag(data,input_tags){
        var s = '';
        s += '<span class="hot-tag-igroup"><span class="hot-tag">'+data+'</span><span class="hot-tag-del">x</span></span><input type="hidden" class="tag-name-id" name="label_id" value="'+input_tags+'"/>';
        var oElm = $(s);
        oElm.find('.hot-tag-del').unbind().click(removeSpan);
        return oElm;
    }
    function inpTagsObjLeftWidth(inp,d){
        inp.css({ paddingLeft: (parseInt(inp.css('padding-left'))||0) + d });
    }
    function addTag(t){
        input_tags=input_tags.concat(prefetched_tags[t]);
		//alert(input_tags)
        form_tags.val(input_tags);
    }
    function removeTag(t){
        input_tags.splice(input_tags.indexOf(t),1);
        form_tags.val(input_tags);
    }
    function arrStr(){
        var cc=inpTags.prev().children(),arr=[];;
        for(var i=0;i<cc.length;i++){
            arr.push(cc.eq(i).find(".hot-tag").text());
        }
        return arr;
    }
    function zyfi(){
        if(inpTags.prev().children().length==0)
                inpTags.val("");
            else
                inpTags.val("");
    }
    function downMenuObj(inp, data){
        var s = '', oElm, oHotTag;
        s += '<div class="form-control-downmenu">'
        s += '<div class="hot-tag-box">'
        s += '<div class="hot-tag-boxin">'
        var zyarr=arrStr();

        for(i in data){
            if(zyarr.indexOf(i)>-1)
                s += '<a class="hot-tag hot-tag-act">'+ i +'</a>';
            else
                s += '<a class="hot-tag">'+ i +'</a>';
        }
        s += '</div>';
        //s += '<div class="hot-tag-btn-group"><input type="button" class="btn" value="脠路露篓" /></div>';
        s += '</div>';
        s += '</div>';
        oElm = $(s);
        oHotTag = $('.hot-tag', oElm);
        inp = $(inp);
        oHotTag.click(function(){
            var num_c=$(this).parent().children(".hot-tag.hot-tag-act").length;
            if(num_c<3||$(this).hasClass("hot-tag-act")) {
                isClickHotTag = true;
                $(this).toggleClass('hot-tag-act');

                setTimeout(function () {
                    inp.focus();
                }, 1);
                inp.prev('.hot-tag-box').html("");
                input_tags=[];
                var c_width=0;
                $('.hot-tag-act', oElm).each(function(){
                    var other = $(this);
					//console.log(input_tags.concat(prefetched_tags[other.text()]) );
					var tagId = input_tags.concat(prefetched_tags[other.text()]);
                    var newTag = createTag( other.text(), tagId );
                    inp.prev('.hot-tag-box').append( newTag );
                    c_width+=newTag.width()+10;
                    addTag(other.text());
                    //inpTagsObjLeftWidth( inp, newTag.outerWidth(true) );
                });
                inpTags.width(inp_width-c_width);
            }
            else{
                isClickHotTag = false;
            }

        });
        oElm.hover(function(){
            isClickHotTag = true;
        },function(){
            isClickHotTag = false;
            zyfi();
            timer = setTimeout(function(){
                downMenu && downMenu.remove();
                downMenu = null;
            },100);
        })
        return oElm;
    }
    function hotTagClick(){
        if($(".hot-tag-box>span").length<3||$(this).hasClass("hot-tag-act")) {
            isClickHotTag = true;
            $(this).toggleClass('hot-tag-act');
            setTimeout(function () {
                inpTags.focus();
            }, 1);
            //inpTags.prev('.hot-tag-box').html("");
            input_tags=[];
            var c_width=0;
            var other = $(this),otherBO=true;;
            $(".hot-tag-box>span").each(function(){
                if($(this).children(".hot-tag").text()==other.text()){
                    otherBO=false;
                    $(this).remove();
                }
            })
            if(otherBO) {
                var newTag = createTag(other.text());
                inpTags.prev('.hot-tag-box').append(newTag);
                addTag(other.text());
            }
            else{

            }

            $(".hot-tag-box>span").each(function(){
                c_width+=$(this).width()+10;
            });
            inpTags.width(inp_width-c_width);
        }
        else{
            isClickHotTag = false;
        }
    }
    function downMenuObj2(inp, data){
        var s = '', oElm, oHotTag;
        s += '<div class="form-control-downmenu">'
        s += '<div class="hot-tag-box">'
        s += '<div class="hot-tag-boxin">'
        var zyarr=arrStr();
        for(i in data){
            if(zyarr.indexOf(data[i])>-1) {
                s += '<a class="hot-tag hot-tag-act">' + data[i] + '</a>';

            }
            else
                s += '<a class="hot-tag">'+ data[i] +'</a>';
        }
        s += '</div>';
        //s += '<div class="hot-tag-btn-group"><input type="button" class="btn" value="脠路露篓" /></div>';
        s += '</div>';
        s += '</div>';
        oElm = $(s);
        oHotTag = $('.hot-tag', oElm);
        inp = $(inp);
        oHotTag.click(hotTagClick);
        oElm.hover(function(){
            isClickHotTag = true;
        },function(){
            isClickHotTag = false;
            zyfi();
            timer = setTimeout(function(){
                downMenu && downMenu.remove();
                downMenu = null;
            },100);
        })
        return oElm;
    }
    var downMenu, timer, isClickHotTag;
    // var dataExample = ['Java', 'C#', 'PHP', 'Python', 'Bootstrap', 'NodeJS'];
    inpTags.focus(function(){
		
        var other = $(this);
        var offset = other.offset();
        clearTimeout(timer);
        if(!downMenu){
			
            downMenu = downMenuObj( other, prefetched_tags );
			
            downMenu.css({ left: offset.left, top: offset.top + other.outerHeight(true), maxWidth: other.outerWidth(true) }).appendTo(document.body);
		}
    }).blur(function(){
        clearTimeout(timer);
        if(isClickHotTag){
            isClickHotTag = false;
        }else{
            timer = setTimeout(function(){
                downMenu && downMenu.remove();
                downMenu = null;
            },100);
        }
    }).keyup(function(e){
        var narr=[];
        for(var i in prefetched_tags){
            if(i.toLowerCase().indexOf($(this).val().toLowerCase())>-1)
                narr.push(i);
        }
        if($(".form-control-downmenu").length>0){
            var zyarr=arrStr(),s='';
            for(var i=0;i<narr.length;i++){
                if(zyarr.indexOf(narr[i])>-1)
                    s += '<a class="hot-tag hot-tag-act">'+ narr[i] +'</a>';
                else
                    s += '<a class="hot-tag">'+ narr[i] +'</a>';
            }
            if(narr.length==0){
                downMenu && downMenu.remove();
                downMenu = null;
            }
            else {
                $(".form-control-downmenu .hot-tag-boxin").html(s);
                $(".form-control-downmenu .hot-tag-boxin .hot-tag").click(hotTagClick);
            }
        }
        else{
            var other = $(this);
            var offset = other.offset();
            clearTimeout(timer);
            if(!downMenu){
                downMenu = downMenuObj2( other, narr );
                downMenu.css({ left: offset.left, top: offset.top + other.outerHeight(true), maxWidth: other.outerWidth(true) }).appendTo(document.body);
            }
        }
    });
})